<template>
  <div class="imgupload">
    <div class="imgItemParent" v-for="(item,index ) in pageImgs" :key="index" v-show="index < limit"
         :class="{'longSize': limit == 1}">
      <div class="imgItem" :class="{active:item.fileCheck == 1}">
          <img class="content" :src="item.fileBlob" v-show="item.fileName">
        <i class="el-icon-delete" v-show="item.fileName" @click.stop="deleteImg(index)"></i>
      </div>
      <div class="name" :title="item.fileName" v-if="item.fileName" @click="checkFun(index)">
        <i class="el-icon-success" v-show="item.fileCheck == 1"></i>
        <i class="no-check" v-show="item.fileCheck == 0"></i>
        <span :class="{active:item.fileCheck == 1}">{{item.fileName}}</span>
      </div>
    </div>

    <div class="imgItemParent" :class="{'longSize': limit == 1}" v-show="pageImgs.length < limit">
      <div class="imgItem">
        <i class="el-icon-plus"></i>
        <input type="file" accept="image/*" @change="imgChange" ref="imgRef">
      </div>
    </div>

    <div style="clear: both;"></div>
  </div>
</template>

<script>
  export default {
    props: ['imgList', 'limit', 'isMultiple', 'type'],
    data() {
      return {
        pageImgs: []
      }
    },
    methods: {
      deleteImg(index) { //删除图片
        let self = this;
        let imgObj = self.pageImgs[index];
        let params = {
          id: imgObj.id
        };
        self.$http({
          url: "/drug/images/deleteImages",
          method: "post",
          params: params,
        }).then(resp => {
          if (resp.success) {
            self.pageImgs.splice(index, 1);
          }
        });

      },
      checkFun(index) { //选中图片
        if(this.limit > 1){
          let fileCheck = this.pageImgs[index].fileCheck;
          this.pageImgs[index].fileCheck = fileCheck == 0? 1:0;
        }
      },
      imgChange(e) { //选择文件
        let self = this;
        if (e.target.files.length) {
          let file = e.target.files[0];
          if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
            return false
          }
          var reader = new FileReader();
          let fileCheck = self.limit > 1?0:1;
          reader.readAsDataURL(file);
          reader.onload = (eve) => {
            self.pageImgs.push({
              fileBlob: eve.target.result,
              fileName: file.name,
              fileCheck: fileCheck
            });
            self.uploadImageToBack(file.name, eve.target.result);
          }

        }
      },


      uploadImageToBack(fileName, fileBlob) {
        let self = this;
        let fileCheck = self.limit > 1?0:1;
        let params = {
          fileName: fileName,
          fileType: this.type,
          fileCheck:fileCheck,
          fileBlob: fileBlob
        };
        self.$http({
          url: "/drug/images/addImages",
          method: "post",
          data: JSON.stringify(params),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            let id = resp.result;
            let len = self.pageImgs.length -1;
            self.pageImgs[len].id = id;
            self.$refs.imgRef.value = '';
          }
        });
      }
    },
    watch: {
      imgList(val) {
        this.pageImgs = val;
      }
    }
  }
</script>

<style scoped lang="scss">
  .imgupload {
    .imgItemParent {
      float: left;
      margin-right: 20px;

      .name {
        padding: 5px 0;
        font-size: 12px;
        color: #333333;
        text-align: center;
        width: 120px;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        i {
          font-size: 18px;
          vertical-align: middle;
          margin-right: 5px;

          &.el-icon-success {
            color: #409eff;
          }

          &.no-check {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 1px solid #cccccc;
            border-radius: 50%;
          }
        }

        span {
          vertical-align: middle;

          &.active {
            color: #409eff;
          }
        }
      }

      &.longSize {
        .imgItem {
          width: 200px;
          height: 40px;
        }
      }
    }

    .imgItem {
      border: 1px dashed #cccccc;
      width: 120px;
      height: 80px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f2f2f2;
      padding: 5px;

      &.active {
        border: 1px solid #409eff;
        background-color: #eff6ff;
      }

      .el-icon-plus {
        font-size: 30px;
        color: #cccccc;
      }

      .el-icon-delete {
        font-size: 12px;
        position: absolute;
        right: 0;
        top: 0;
        padding: 5px;
        cursor: pointer;
        z-index: 2;
        background: #8e8888b8;
        color: #ffffff;
      }

      input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

      .content {
        max-width: 100%;
        max-height: 100%;
      }

      .click {
        font-size: 12px;
      }
    }
  }
</style>
